<template>
  <div class="min-h-screen bg-gray-50 text-neutral-dark">

    <main>
      <!-- 核心优势区 -->
      <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">为什么选择好客山东</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">我们提供最优质的旅游体验，让您的山东之行无忧无虑</p>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- 优势1 -->
            <div class="bg-neutral p-6 rounded-xl card-hover">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa fa-shield text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">官方保障·放心游</h3>
              <p class="text-gray-600">官方认证平台，拒绝低价陷阱。所有合作商家资质审核，旅游投诉1小时响应</p>
            </div>
            
            <!-- 优势2 -->
            <div class="bg-neutral p-6 rounded-xl card-hover">
              <div class="w-14 h-14 bg-secondary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa fa-train text-secondary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">交通便捷·易出行</h3>
              <p class="text-gray-600">高铁串联16市，景区直通车直达。提供机场接送机预约，亲子/老人游更省心</p>
            </div>
            
            <!-- 优势3 -->
            <div class="bg-neutral p-6 rounded-xl card-hover">
              <div class="w-14 h-14 bg-tertiary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa fa-book text-tertiary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">文化+自然·双体验</h3>
              <p class="text-gray-600">从三孔到蓝海，玩得有深度。儒家研学、黄河观海、海滨赶海等特色路线全覆盖</p>
            </div>
            
            <!-- 优势4 -->
            <div class="bg-neutral p-6 rounded-xl card-hover">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa fa-smile-o text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">本地礼遇·够热情</h3>
              <p class="text-gray-600">专属福利，来了就有。预订即赠山东文旅手册，部分路线含本地特产伴手礼</p>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 热门目的地 -->
      <section class="py-16 bg-neutral">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
            <div>
              <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">热门目的地</h2>
              <p class="text-gray-600 max-w-2xl">初遇山东？以下景点不容错过！覆盖山东核心名片，省心打卡不踩雷！</p>
            </div>
    
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 目的地卡片 -->
            <div 
              class="bg-white rounded-xl overflow-hidden shadow-md card-hover"
              v-for="(destination, index) in featuredDestinations" 
              :key="index"
            >
              <div class="relative h-64 overflow-hidden">
                <img 
                  :src="destination.image" 
                  :alt="destination.name" 
                  class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                >
                <div class="absolute top-4 left-4 bg-primary text-white text-sm font-medium px-3 py-1 rounded-full">
                  {{ destination.tag }}
                </div>
              </div>
              <div class="p-6">
                <div class="flex justify-between items-start mb-3">
                  <h3 class="text-xl font-bold">{{ destination.name }}</h3>
                  <div class="flex items-center">
                    <i class="fa fa-star text-tertiary"></i>
                    <span class="ml-1 font-medium">{{ destination.rating }}</span>
                  </div>
                </div>
                <p class="text-gray-600 mb-4">{{ destination.description }}</p>
                <div class="flex items-center text-sm text-gray-500 mb-6">
                  <div class="flex items-center mr-4">
                    <i class="fa fa-map-marker text-primary mr-1"></i>
                    <span>{{ destination.location }}</span>
                  </div>
                  <div class="flex items-center">
                    <i class="fa fa-clock-o text-primary mr-1"></i>
                    <span>{{ destination.duration }}</span>
                  </div>
                </div>
                <div class="flex justify-between items-center">
                  <div>
                    <span class="text-primary font-bold text-xl">¥{{ destination.price }}</span>
                    <span class="text-gray-500">/人起</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 用户评价 -->
      <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">游客怎么说</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">来自真实游客的体验分享，看看他们的山东之旅</p>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div 
              class="bg-neutral p-6 rounded-xl card-hover"
              v-for="(review, index) in userReviews" 
              :key="index"
            >
              <div class="flex items-center mb-4">
                
                <div>
                  <h4 class="font-bold">{{ review.name }}</h4>
                  <p class="text-sm text-gray-500">{{ review.location }}</p>
                </div>
              </div>
              <div class="flex mb-4">
                <i class="fa fa-star text-tertiary" v-for="n in 5" :key="n"></i>
              </div>
              <p class="text-gray-600 italic">"{{ review.comment }}"</p>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 夏季专题 -->
      <section class="py-16 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-12">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">夏日山东·清凉玩法</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">6-8月山东：25℃山林漂流、30℃海滨踏浪，人均800元玩遍3城！</p>
          </div>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
            <!-- 左侧：海滨逐浪 -->
            <div class="relative rounded-xl overflow-hidden h-96 group">
              <img src="@/assets/wjy/hk02.jpg" alt="山东海滨风光" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
              <div class="absolute bottom-0 left-0 p-8 text-white">
                <h3 class="text-2xl font-bold mb-3">海滨逐浪</h3>
                <p class="mb-6 max-w-md">山东的海，藏着夏天最爽的打开方式！从青岛到威海，从烟台到日照，承包你的夏日浪漫</p>
              </div>
            </div>
            
            <!-- 右侧：山林避暑 -->
            <div class="relative rounded-xl overflow-hidden h-96 group">
              <img src="@/assets/wjy/hk04.jpg" alt="山东山林风光" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
              
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-dark text-white pt-16 pb-8">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
          <div>
            <div class="flex items-center space-x-2 mb-6">
              <span class="text-2xl font-display">好客山东</span>
            </div>
            <p class="text-gray-400 mb-6">山东省官方旅游服务平台，以"让游客感受山东温度"为使命，提供一站式旅游服务。</p>
            <div class="flex space-x-4">
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa fa-weixin text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa fa-weibo text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa fa-douyin text-xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa fa-youtube-play text-xl"></i>
              </a>
            </div>
          </div>

          <div>
            <h3 class="text-lg font-bold mb-6">联系我们</h3>
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-phone text-primary mt-1 mr-3"></i>
                <span class="text-gray-400">400-123-4567</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-envelope text-primary mt-1 mr-3"></i>
                <span class="text-gray-400">service@haokeshandong.com</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                <span class="text-gray-400">山东省潍坊市高密市青岛科技大学</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-clock-o text-primary mt-1 mr-3"></i>
                <span class="text-gray-400">工作时间: 9:00-9:05 (每周除周一外均休息)</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
          <p>© 2025 好客山东旅游网 鲁ICP备1234567号-1</p>
          <p class="mt-2">旅游投诉电话：400-123-4567，投诉处理时限:工作期间</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';

// 状态管理
const mobileMenuOpen = ref(false);
const showDestinationSubmenu = ref(false);
const showExperienceSubmenu = ref(false);
const currentBannerIndex = ref(0);
const isScrolled = ref(false);
let bannerInterval;


// 热门目的地数据
const featuredDestinations = ref([
  {
    name: '泰山',
    image: 'https://picsum.photos/id/1018/800/600',
    tag: '必打卡',
    description: '登泰山而小天下！含门票 + 索道预订，凌晨出发看一场震撼日出',
    location: '泰安市',
    duration: '建议游玩1-2天',
    price: 180,
    slug: 'taishan'
  },
  {
    name: '青岛',
    image: 'https://picsum.photos/id/1039/800/600',
    tag: '海滨城市',
    description: '逛八大关老建筑，坐帆船游黄海，晚上去李村夜市撸串喝啤酒',
    location: '青岛市',
    duration: '建议游玩2-3天',
    price: 260,
    slug: 'qingdao'
  },
  {
    name: '曲阜三孔',
    image: 'https://picsum.photos/id/1054/800/600',
    tag: '文化体验',
    description: '穿汉服行拜师礼、听《论语》讲解！含专业讲解员服务',
    location: '济宁市',
    duration: '建议游玩1天',
    price: 140,
    slug: 'qufu'
  }
]);

// 用户评价数据
const userReviews = ref([
  {
    name: '刘女士',
    location: '来自湖北武汉',
    comment: '带娃来威海玩了5天，每天泡在海边，傍晚去夜市买10元/3串的烤鱿鱼。人均花了800元，比去三亚便宜太多，孩子说下次还要来！'
  },
  {
    name: '朱先生',
    location: '来自河北石家庄',
    comment: '蒙山漂流太刺激了！全程20分钟，水花溅在身上超凉快，一点不热。下山后在景区餐厅吃了蒙山炒鸡，配着现烙的煎饼，58元一份够2人吃。'
  },
  {
    name: '王同学',
    location: '来自广东广州',
    comment: '本来担心文化游无聊，没想到讲解员超会互动，还教我们写毛笔字，现在对《论语》都有兴趣了！'
  }
]);


// 页面卸载时清理
onUnmounted(() => {
  clearInterval(bannerInterval);
  window.removeEventListener('scroll', handleScroll);
});

// 处理滚动事件
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50;
};
</script>

<style scoped>
/* 自定义样式 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  .card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  }
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-md transform hover:-translate-y-0.5;
  }
  .btn-secondary {
    @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-secondary/90 hover:shadow-md transform hover:-translate-y-0.5;
  }
}

</style>
